

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UserManage Login</title>

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/new.css">
<!-- Bootstrap core JavaScript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  
<script type="text/javascript">
	//点击切换验证码
	function changeVerifyCode() {
		$("#yzmImg").attr("src",
				"Kaptcha.jpg?" + Math.floor(Math.random() * 100));
	}
	//校验图形验证码及登录
	function onlogin() {
		var param = {
			verifyCode : $("#verifyCode").val()
		};
		$.ajax({
			//contentType:'application/json;charset=UTF-8',
			timeout : 20000,
			type : "POST",
			dataType : "JSON",
			url : "/HMInfomation/user/verifyCode",
			data : param,
			success : function(data) {
				
				//验证码校验成功
				if (data) {
					document.getElementById("form1").submit();
				}else{
					//TODO 修改样式
					$("#errmsg").text("您输入的验证码有误，请重新输入！");
					changeVerifyCode();
				}
			}

		});

	}
	
</script>


<script type="text/javascript">
	//验证密码
	function checkUserpsw() {
		
		var password = document.getElementById("password").value.length; //获取文本框的值
		
		if(password=0 || password<6 || password>=17){
			$("#checkpsw").html("密码位数不能小于6位，不能大于16位。请重新输入！");
			$("#login").attr("disabled",true);
		}else{
			$("#checkpsw").html("");
			$("#login").attr("disabled",false);
		}
	}

</script>

<script type="text/javascript">
	//验证用户
	function checkUserName() {
		
		var param = {
				userName: $("#userName").val()
		}
		
		$.ajax({
			//contentType:'application/json;charset=UTF-8',
			timeout : 20000,
			type : "POST",
			dataType : "JSON",
			url : "/HMInfomation/user/queryUserByName",
			data : param,
			success : function(data) {
				//用户名校验成功
				if (data) {
					//没查到
					 $("#checkUserName").html("用户名不存在！"); 
					 $("#login").attr("disabled",true);
				}else{
					//提示重复
					 $("#checkUserName").html(""); 
					 $("#login").attr("disabled",false);
				}
			}

		});  
		
	}
 
</script> 


</head>
<body>
	<div class="container" id="main_id">
		<h1>UserManage Login</h1>
		<hr />

		<form action="user/login" id="form1" method="post">
			<div class="form-group">
				<label for="userName">UserName:</label> <input type="text"
					class="form-control" id="userName" name="userName"
					placeholder="Enter UserName" onchange="checkUserName()"/>
					<label id="checkUserName" style="color: red;"></label>
			</div>
			<div class="form-group">
				<label for="password">Password:</label> <input type="password"
					class="form-control" id="password" name="passWord"
					placeholder="Enter Password:" onchange="checkUserpsw()"/>
					<label id="checkpsw" style="color: red;"></label>
			</div>

			<div>
				<input type="text" name="verifyCode" id="verifyCode"> <img
					src="Kaptcha.jpg" onclick="changeVerifyCode()" id="yzmImg"
					style="cursor: pointer;"> <a href="javascript:void(0)"
					onclick="changeVerifyCode()">看不清，换一张</a></br>
					<label id="errmsg" style="color: red;"></label>
			</div>

			<div class="form-group">
				<button type="button" id="login" class="btn btn-sm btn-success"
					onclick="onlogin()" style="width: 100px; height: 30px;">Sign in</button>
			</div>
			New to Here? <a href="user/addUser">Create</a> an account.
			
		</form>
		
	</div>

	<c:if test="${flag }">
		<div class="alert alert-danger alert-dismissable" role="alert">
			<button class="close" type="button" data-dismiss="alert">&times;</button>
			${errmsg }
			<%
				session.removeAttribute("flag");
				session.removeAttribute("errmsg");
			%>
		</div>
	</c:if>
</body>

</html>